import {
    getParamsApi
} from '@/api/params'
import {
    addGoodsApi
} from '@/api/goods'
import {
    baseURL,
    serverURL
} from '@/utils/request'
import _ from 'lodash'
export default {
    name: 'GoodsAdd',
    mounted() {
        console.log(this.$route.params.id)
            // 调获取该商品对应的数据的 api,给表单赋值
    },
    data() {
        // 验证商品数量
        const checkGoodsNumber = (rules, value, callback) => {
            if (!/^\d+$/.test(value)) return callback(new Error('商品数量必须是正整数'))
            callback()
        }
        return {
            // 当前激活的tab选项卡，必须是string类型，刚好可以跟步骤条需要的整数数据进行关联
            active: '1',
            // 表单选项
            addForm: {
                goods_id: '',
                goods_name: '',
                goods_price: '',
                goods_weight: '',
                goods_number: '',
                goods_introduce: '',
                pics: [] // 上传的图片临时路径（对象）
            },
            // 级联菜单配置选项
            cateProps: {
                expandTrigger: 'hover',
                checkStrictly: true,
                value: 'cat_id',
                label: 'cat_name'
            },
            // 选中的分类数组
            selectedCatIds: [1, 3, 6],
            // 动态参数或者静态参数的标识
            activeName: 'many',
            manyData: [],
            onlyData: [],
            // 收集下拉菜单或者单选的静态属性的值
            optionsValues: {},
            // 接收选中的动态参数属性值
            checkedSku: [],
            // 文件上传的后台api接口地址
            upLoadUrl: baseURL + '/upload',
            // 文件上传时需要携带请求头信息
            headerObj: {
                Authorization: window.sessionStorage.getItem('token')
            },
            // 文件上传时文件的名字
            name: 'file',
            // 图片预览
            previewDialogVisible: false,
            previewPath: '',
            // 商品基本信息的表单校验
            addFormRules: {
                goods_name: [{
                        required: true,
                        message: '请输入商品名称',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 10,
                        message: '商品名称的长度在2-30个字符之间',
                        trigger: 'blur'
                    }
                ],
                goods_price: [{
                    required: true,
                    message: '请输入商品价格',
                    trigger: 'blur'
                }, {
                    type: 'number',
                    message: '商品价格必须是数字',
                    trigger: 'blur'
                }],
                goods_weight: [{
                    required: true,
                    message: '请输入商品重量',
                    trigger: 'blur'
                }, {
                    type: 'number',
                    message: '商品重量必须是数字',
                    trigger: 'blur'
                }],
                goods_number: [{
                    required: true,
                    message: '请输入商品数量',
                    trigger: 'blur'
                }, {
                    validator: checkGoodsNumber,
                    trigger: 'blur'
                }]
            }

        }
    },
    computed: {
        catId() {
            return this.selectedCatIds.length === 3 ? this.selectedCatIds[2] : null
        },
        // 所有的动态参数的集合
        skus() {
            const attrs = []
            this.manyData.forEach(item => {
                if (item.attr_vals.length) {
                    item.attr_vals.forEach(item1 => {
                        attrs.push({
                            attr_id: item.attr_id,
                            attr_value: item1
                        })
                    })
                }
            })
            return attrs
        },
        // 所有的静态属性的集合(文本输入框的值)
        attrs() {
            const attrs = []
            this.onlyData.forEach(item => {
                if (item.attr_vals.length === 1) {
                    attrs.push({
                        attr_id: item.attr_id,
                        // 如果有多个选项，默认选择第1项，如果需要改变，在下拉菜单改变时进行修改即可
                        attr_value: item.attr_vals[0]
                    })
                }
            })
            return attrs
        }

    },
    methods: {
        // 切换tab栏之前的钩子
        beforeLeaveHandle(active, old) {
            /* console.log(active) // 即将激活的tab栏
            console.log(old) // 离开的tab栏 */
            // 如果是从第1个tab到其他任何tab时，做判断，如果为false，则阻止切换，为true代表允许切换
            if (old === '1' && !this.catId) {
                this.$message.error('请先选择分类')
                return false
            }
            return true
        },
        // tab选项卡切换时触发,激活成功的tab栏
        handleClick() {
            // 获取动态参数和静态属性
            if (this.active === '2') {
                // 动态参数
                this.activeName = 'many'
                    // 获取参数
                this.getParams()
            } else if (this.active === '3') {
                // 静态属性
                this.activeName = 'only'
                    // 获取参数
                this.getParams()
            }
        },
        // 级联菜单选项改变时触发
        handleChanged() {
            if (this.selectedCatIds.length !== 3) {
                this.selectedCatIds = []
            }
            this.$refs.cateHandle.dropDownVisible = false
        },
        // 获取参数或者属性
        async getParams() {
            const res = await getParamsApi(this.catId, this.activeName)
            if (res.meta.status !== 200) return this.$message.error('获取数据失败')

            // 数据处理
            res.data.forEach(item => {
                // 将属性值由,分割的字符串转换为数组方便进行遍历
                item.attr_vals = item.attr_vals ? item.attr_vals.split(',') : []
            })

            // 获取动态参数和静态属性
            if (this.activeName === 'many') {
                this.manyData = res.data
            } else {
                this.onlyData = res.data
            }
        },
        // 选择复选框组时，收集选择的动态参数，obj对象中包含了attr_id和attr_value选项
        changeSku(e, obj) {
            // console.log(e) // true和false
            if (e) {
                if (!this.skus.includes(obj)) {
                    this.skus.push(obj)
                }
            } else {
                // 删除
                const index = this.skus.findIndex(item => item.attr_value === obj.attr_value && item.attr_id === obj.attr_id)
                if (index !== -1) {
                    this.skus.splice(index, 1)
                }
            }
        },
        // 改变文本输入框的静态属性
        changeAttr(e, attrId) {
            const inputValue = e.target.value.trim()
            if (inputValue.length === 0) {
                e.target.focus()
                return this.$message.error('选项不能为空')
            }
            const attr = this.attrs.find(item => item.attr_id === attrId)
            attr.attr_value = inputValue
        },
        // 上传文件成功时的回调
        handleSuccess(res) {
            if (res.meta.status !== 200) return this.$message.error('文件上传失败')
            this.addForm.pics.push({
                pic: '/' + res.data.tmp_path
            })
        },
        // 文件上传前的回调(做相关的校验)
        checkFile(file) {
            const mimeType = ['image/jpeg', 'image/png', 'image/gif']
            if (!mimeType.includes(file.type)) {
                this.$message.error('上传的文件格式不正确')
                return false
            }
            return true
        },
        // 针对大文件上传时可以出现进度条
        handleProgress(event, file, fileList) {
            // console.log(event)
        },
        // 删除前的提示信息
        async removeConfirm() {
            // 弹窗提示用户是否要删除
            const confirmResult = await this.$confirm(
                '请问是否要删除该图片吗?',
                '删除提示', {
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).catch(err => err)
            if (confirmResult !== 'confirm') {
                return Promise.reject(new Error())
            }
            return Promise.resolve()
        },
        // 删除上传好的文件的回调
        handleRemove(file) {
            const row = '/' + file.response.data.tmp_path
            const index = this.addForm.pics.findIndex(item => item.pic === row)
            this.addForm.pics.splice(index, 1)
        },
        // 预览图片
        handlePreview(file) {
            this.previewDialogVisible = true
            this.previewPath = serverURL + '/' + file.response.data.tmp_path
        },
        // 添加商品
        addGoods() {
            this.$refs.addFormRef.validate(async valid => {
                if (!valid) return this.$message.error('表单校验不通过')

                //  属性验证：
                // 动态参数
                if (this.skus.length === 0) return this.$message.error('必须选择动态参数')

                // 静态属性
                if (this.attrs.length === 0) return this.$message.error('必须选输入静态属性')

                // 必须所有的静态下拉框都有值
                if (Object.keys(this.optionsValues).length < this.onlyData.filter(item => item.attr_vals.length > 1).length) return this.$message.error('必须所有的静态下拉框都有选项')

                // 图片
                if (this.addForm.pics.length === 0) return this.$message.error('至少要上传一张图片')

                // 介绍
                if (this.addForm.goods_introduce.length === 0) return this.$message.error('商品详情不能为空')

                // 整理接口参数
                /* const submitData = {
                    goods_name: this.addForm.goods_name,
                    goods_price: this.addForm.goods_price,
                    goods_weight: this.addForm.goods_weight,
                    goods_number: this.addForm.goods_number,
                    goods_introduce: this.addForm.goods_introduce
                    pics:this.addForm.pics,
                    goods_cat:this.selectedCatIds.join(',')
                } */
                // 进行深拷贝
                const submitData = _.cloneDeep(this.addForm)
                submitData.goods_cat = this.selectedCatIds.join(',')

                // 整合动态参数和静态属性，形成一个数组对象的形式，如：
                /*  [{
                     "attr_id": 15,
                     "attr_value": "ddd"
                 }, {
                     "attr_id": 15,
                     "attr_value": "eee"
                 }] */
                // 处理静态下拉框属性
                const options = []
                    /*
                     // 方式一： for in 遍历对象
                    for (const key in this.optionsValues) {
                        options.push({
                            attr_id: key,
                            attr_value: this.optionsValues[key]
                        })
                    } */
                    // 方式二： 循环对象key数组
                Object.keys(this.optionsValues).forEach(key => {
                    options.push({
                        attr_id: key,
                        attr_value: this.optionsValues[key]
                    })
                })
                submitData.attrs = [...this.skus, ...this.attrs, ...options]

                // 发送请求进行添加
                const res = await addGoodsApi(submitData)
                console.log(res)
                if (res.meta.status !== 201) {
                    return this.$message.error('添加商品失败了！')
                }
                this.$message.success('添加商品成功了！')

                this.active = 6
                    // 编程式导航跳转到商品列表
                this.$router.push('/goods')
            })
        }
    }
}